<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">复核入库详情</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col :span="3" v-if="productStockDetailData.status == 2">
                    <el-button
                        class="btn-success width150"
                        type="primary"
                        @click="confirm()"
                        v-hasPermi="['system:productStock:confirm']"
                    >确认入库</el-button>
                </el-col>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : productStockDetailData.status == 1 }">已入库</span>
                        <span :class="{ 'active' : productStockDetailData.status == 2 }">待入库</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>计划编码：</span>{{ productStockDetailData.planCode ? productStockDetailData.planCode : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>产品名称：</span>{{ productStockDetailData.productBasicName ? productStockDetailData.productBasicName : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>规格：</span>{{ productStockDetailData.specification ? productStockDetailData.specification : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>产品批号：</span>{{ productStockDetailData.batchNumber ? productStockDetailData.batchNumber : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>箱规：</span>{{ productStockDetailData.productSpace ? productStockDetailData.productSpace : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>生产序列号：</span>{{ productStockDetailData.productionSerialNumber ? productStockDetailData.productionSerialNumber : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>计划数量：</span>{{ productStockDetailData.planNum ? productStockDetailData.planNum : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>完成数量：</span>{{ productStockDetailData.endNum ? productStockDetailData.endNum : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>待入库：</span>{{ productStockDetailData.endNum ? productStockDetailData.endNum : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>实际入库：</span>{{ productStockDetailData.storeNum ? productStockDetailData.storeNum : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>入库仓库：</span>{{ productStockDetailData.warehouseName ? productStockDetailData.warehouseName : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>状态：</span>
                    <font v-if="productStockDetailData.status == 1" style="color:#52C41A">已入库</font>
                    <font v-if="productStockDetailData.status == 2" style="color:#13C2C2">待入库</font>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { detailProductStock, confirmProductStock } from "@/api/system/productStockConfirm/productStockConfirm"
export default {
    name: "productStockDetail",
    data() {
        return {
            id: '',
            productStockDetailData: '',
        }
    },
    created() {
        this.id = this.$route.query.id
        this.getDetailData()
    },
    methods: {
        // 获取详情信息
        getDetailData() {
            detailProductStock(this.id).then(res => {
                // console.log(res)
                this.productStockDetailData = res.data
            })
        },
        // 标记完成
        confirm(){
          confirmProductStock({id: this.id }).then(res => {
            if(res.code == 200){
              this.getDetailData()
              this.$modal.msgSuccess("操作成功")
            }
          })
        }
    }
}
</script>
